<template>
  <div class="index-container" :class="isShow?'':'musicTabHide_2'">
    <div class="nav" :class="isTabShhow?'':'Hide'">
      <ul>
        <li>
          <router-link to="/discovery">
            <span class="iconfont icon-find-music"></span>
            发现音乐
          </router-link>
        </li>
        <li>
          <router-link to="/playlists">
            <span class="iconfont icon-music-list"></span>
            推荐歌单
          </router-link>
        </li>
        <li>
          <router-link to="/songs">
            <span class="iconfont icon-music"></span>
            最新音乐
          </router-link>
        </li>
        <li>
          <router-link to="/mvs">
            <span class="iconfont icon-mv"></span>
            最新MV
          </router-link>
        </li>
      </ul>
    </div>
    <div class="main">
      <router-view @newsInfo="getMusicId"></router-view>
    </div>
    <div class="player" :class="isShow?'':'Hide'">
      <!-- <audio :src='musicUrl' controls autoplay></audio> -->
      <aplayer :audio="audio" :lrcType="1" ref="aplayer" :volume.sync="volume" :mini.sync="mini" :loop.sync="loop"
        :order.sync="order" :listFolded.sync="listFolded" :fixed="fixed" />
    </div>
  </div>
</template>

<script>
  import { getSongDetailAPI, getLyricAPI, getSongUrlAPI } from '@/api'
  export default {
    name: 'index',

    data() {
      return {
        // 播放列表最大高度
        // listMaxHeight: '130',
        volume: 0.7,
        // 迷你模式
        mini: false,
        // 音频循环播放, 可选值: 'all', 'one', 'none'
        loop: 'all',
        // 音频循环顺序, 可选值: 'list', 'random'
        order: 'random',
        // 吸底模式
        fixed: true,
        // 是否显示音乐控制面板
        listFolded: true,
        // 侧边栏
        isTabShhow: true,
        audio: {
          name: '蜉蝣',
          artist: '华晨宇',
          url: "",
          cover: "https://p2.music.126.net/UsSAd3Bdf77DjhCuTSEvUw==/109951163077613693.jpg", // prettier-ignore
          lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
        },
        audioList: [],
        id: 0,
        // 音乐栏
        isShow: true
      };
    },
    async created() {
      const songDetailRes = await getSongDetailAPI(34228112)
      this.audio.name = songDetailRes.data.songs[0].name
      this.audio.cover = songDetailRes.data.songs[0].al.picUrl
      this.audio.artist = songDetailRes.data.songs[0].ar[0].name

      const lyricRes = await getLyricAPI(34228112)
      this.audio.lrc = lyricRes.data.lrc.lyric
      const songUrlRes = await getSongUrlAPI(34228112)
      this.audio.url = songUrlRes.data.data[0].url
    },
    mounted() {
      this.$bus.$on('changeMusicTab', (data) => {
        this.isShow = data
      })
      this.$bus.$on('changeSideTab', (data) => {
        this.isTabShhow = data

      })
    },
    watch: {
      'audio.url'() {
        setTimeout(() => {
          this.$refs.aplayer.play();
        }, 200)

      },
      async id() {
        const songDetailRes = await getSongDetailAPI(this.id)
        this.audio.name = songDetailRes.data.songs[0].name
        this.audio.cover = songDetailRes.data.songs[0].al.picUrl
        this.audio.artist = songDetailRes.data.songs[0].ar[0].name
        const lyricRes = await getLyricAPI(this.id)
        this.audio.lrc = lyricRes.data.lrc.lyric
      },
    },
    methods: {
      getMusicId(id) {
        this.id = id
      }
    },
  }
</script>

<style>

</style>